<template>
  <div class="home">
    <el-card class="welcome-card">
      <h1>欢迎使用惊喜一餐！</h1>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="8" v-for="(restaurant, index) in restaurants" :key="index">
        <el-card class="restaurant-card">
          <img :src="restaurant.image" class="restaurant-image" />
          <div class="restaurant-info">
            <h3>{{ restaurant.name }}</h3>
            <el-rate v-model="restaurant.rating"></el-rate>
            <p class="restaurant-description">{{ restaurant.description }}</p> <!-- 文字介绍 -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [
        {
          name: '蟹堡王',
          image: 'src/assets/BurgerRestaurant.png',
          rating: 4.5,
          description: '比基尼海滩最知名的餐厅，招牌：蟹黄堡，新鲜制作，快速服务。'
        },
        {
          name: '维多披萨',
          image: 'src/assets/PizzaRestaurant.jpg',
          rating: 4.0,
          description: '加菲猫认证，正宗意大利风味披萨，多种口味选择。'
        },
        {
          name: '肯德基',
          image: 'src/assets/KFCRestaurant.png',
          rating: 5,
          description: '全球知名的快餐连锁，提供炸鸡、汉堡等多种快餐。'
        },
      ]
    }
  }
}
</script>

<style scoped>
.home {
  background-image: url('src/assets/background.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover; /* 覆盖整个元素 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  min-height: 100vh; /* 至少100%的视口高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
  background-color: transparent; /* 设置背景为透明 */
}
.restaurant-card {
  margin-bottom: 20px;
}
.restaurant-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.restaurant-description {
  margin-top: 10px; /* 为描述添加一些上边距 */
}
h3 {
  font-size: 30px;
  margin-bottom: 0px;
}
/* 在<style scoped>标签内 */
.restaurant-description {
  font-size: 25px; /* 将字体大小设置为18像素 */
}
</style>